<template>
  <div class="sponsor">
    <div class="banner">
      <img v-bind:src="cover" alt="">
    </div>
    <div class="CrowdfundBox">
      <div class="CrowdfundIn">
        <p v-text="name"></p>
        <article v-text="description"></article>
        <button @click="Cshow" v-show="all">点击查看全部</button>
      </div>
    </div>
    <div class="detailBox" v-show="hidden">
      <div class="content" v-html="content"></div>
      <button @click="Chidden">收起</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sponsor',
    props: [
      'cover',
      'name',
      'description',
      'ActivityCon',
      'content'
    ],
    data () {
      return {
        hidden: true,
        all: false
      }
    },
    methods: {
      Cshow: function () {
        this.hidden = true
        this.all = false
      },
      Chidden: function () {
        this.hidden = false
        this.all = true
      }
    }
  }
</script>

<style scoped lang="less">
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  .sponsor{
    .banner{
      width: 100%;
      height: 350/2/10rem;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .CrowdfundBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      padding-bottom:15/2/10rem;
      border-bottom:1px solid @border;
      margin:0 auto;
      .CrowdfundIn{
        height: auto;
        overflow: hidden;
        padding:0 1.5rem;
        p{
          font-size:1.2rem;
          margin:15/2/10rem auto;
          color: #000;
        }
        article{
          color: @font;
          font-size:1.1rem;
          text-indent: 2em;
        }
        button{
          float: right;
          color: @orange;
          background: none;
          width: 8rem;
          height: 1.5rem;
          font-size:0.9rem;
        }
      }
    }
    .detailBox{
      line-height: 1.5rem;
      color: #000;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      font-size: 1.2rem;
      padding-top:0.75rem ;
      position: relative;
      div{
        padding-bottom: 0.75rem;
      }
      .content{
        font-size: 1rem;
        line-height: 1.5rem;
        color: #8e8e8e;
        text-indent: 2em;
      }
      button{
        width: 5rem;
        height: 2.5rem;
        display: block;
        margin:.5rem auto;
        color: #f1ae9b;
        background:#fff url(../assets/images/arrow.png) no-repeat center top;
        -webkit-background-size:1.2rem 13/2/10rem;
        background-size:1.2rem 13/2/10rem;
        padding-top:1rem;
        font-size:0.9rem;
      }
    }
  }

</style>
